<template>
	<view class="main-cont box box-tb">
<!-- 		<view class="fixed" :style="{'z-index':zIndex}">
			<u-dropdown :border-bottom="true" @open="open" @close="close">
				<u-dropdown-item v-model="xnxqValue" :title="xnxqTitle" :options="xnxqList" @change="changeXnxq">
				</u-dropdown-item>
				<u-dropdown-item v-model="typeValue" :title="typeTitle" :options="typeList" @change="changeType">
				</u-dropdown-item>
			</u-dropdown>
		</view> -->
		<view class="box box-tb" style="overflow-y: auto;width:100%;height: 90%;left: 0;">
<!-- 			<view class="top box box-align-center box-pack-between" @click="goTimeSort">
				<view class="box box-align-center">
					<view class="icon mr10"></view>
					总学习时长
					<view class="time">
						{{sumTime}}
					</view>
				</view>
				<view class="" style="color: #7F84E4;font-size: 26rpx;" @click="goTimeSort">
					最新更新 >
				</view>
			</view>
			<view class="chart">
				<view class="charts-box">
					<qiun-data-charts type="demotype" :chartData="chartData" background="none" :ontouch="true" />
				</view>
			</view> -->
			<view class="c-list">
				<view class="list box box-align-center box-pack-between mt20" @click="goClass">
					<view class="box box-align-center">
						<u-image src="/static/class/icon_sort.png" width="73rpx" height="73rpx"></u-image>
						<view class="ml5" style="font-size: 30rpx;font-weight: bold;">
							成绩排名
						</view>
					</view>
					<view class="box box-align-center">
						更多
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="lists box box-align-center" v-for="(item, index) in cjList" :key="index">
					<view class="sort box box-align-center box-pack-center" v-if="index<=2">
						<u-image src="@/static/home/sort_1.png" width="38rpx" height="45rpx" v-if="index == 0"></u-image>
						<u-image src="@/static/home/sort_2.png" width="38rpx" height="45rpx" v-if="index == 1"></u-image>
						<u-image src="@/static/home/sort_3.png" width="38rpx" height="45rpx" v-if="index == 2"></u-image>
					</view>
					<view class="sort sort box box-align-center box-pack-center" v-if="index>2">{{parseInt(index)+1}}</view>
					<view class="name box box-align-start box-pack-start">
						<u-avatar :src="item.icon" mode="circle" size="72"></u-avatar>
						<view class="ml10 box box-tb box-align-start">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								{{item.acc}}
							</view>
						</view>
					</view>
					<view class="score">{{item.num}}分</view>
				</view>
			</view>
			<view class="c-list">
				<view class="list box box-align-center box-pack-between" @click="goZs">
					<view class="box box-align-center">
						<u-image src="/static/class/icon_zs1.png" width="73rpx" height="73rpx"></u-image>
						<view class="ml5" style="font-size: 30rpx;font-weight: bold;">
							学生证书
						</view>
					</view>
					<view class="box box-align-center">
						更多
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="lists box box-align-center" v-for="(item, index) in zsList" :key="index">
					<view class="sort sort box box-align-center box-pack-center">{{parseInt(index)+1}}</view>
					<view class="name box box-align-start box-pack-start">
						<u-avatar :src="item.icon" mode="circle" size="72"></u-avatar>
						<view class="ml10 box box-tb box-align-start">
							<view class="">
								{{item.name}}
							</view>
							<view class="">
								{{item.acc}}
							</view>
						</view>
					</view>
					<view class="score">{{item.num}}个</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sumTime: '',
				currSchool: uni.getStorageSync('currSchool'),
				chartData: {
					categories: [],
					series: [],
				},
				xnxqList: [{
					label: '全部学年',
					value: ''
				}],
				xnxqTitle: '全部学年',
				xnxqValue: '',
				xn: '',
				xq: '',
				typeList: [{
					label: '全部专业',
					value: ''
				}],
				typeValue: '',
				typeTitle: '全部专业',
				cjList: [],
				zsList: [],
				zIndex:0
			}
		},
		mounted() {
			this.teamXqbg();
		},
		methods: {
			teamXqbg() {
				let params = { schoolid: this.currSchool.id, zydm: '' };
				this.$api.post({url: '/ycert/teamXqbg'}, params).then(res => {
					this.sumTime = Math.floor(res.sumTime / 60) + "小时" + (res.sumTime % 60) + "分";
					this.cjList = res.cjList;
					this.zsList = res.zsList;
					this.chartData.categories = res.categories;
					this.chartData.series = res.series;
					console.log(res);
				})
			},
			listXnxq() {
				this.$api.post({url: '/yteachplan/listSchoolXnXq'}, { schoolid: this.currSchool.id }).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						this.xnxqList.push(res.list[i]);
					}
				})
			},
			zyList() {
				this.$api.post({url: '/dzy/listZy'}, {schoolid: this.currSchool.id}).then(res => {
					for (let i = 0; i < res.list.length; i++) {
						this.typeList.push(res.list[i]);
					}
				})
			},
			changeXnxq(e) {
				if (e != '') {
					this.xnxqTitle = e;
					this.xn = e.substring(0, 9);
					this.xq = e.substring(9, 12);
				} else {
					this.xnxqTitle = '全部学年';
					this.xn = '';
					this.xq = '';
				}
				this.teamXqbg();
			},
			goClass() {
				uni.navigateTo({
					url: "/team/my/classSort"
				})
			},
			goZs() {
				uni.navigateTo({
					url: "/team/my/zs"
				})
			},
			goTimeSort() {
				uni.navigateTo({
					url: "/team/my/timeSort?xn=" + this.xn + "&xq=" + this.xq + "&zydm=" + this.typeValue
				})
			},
			changeType(e) {
				console.log(e);
				if (e != '') {
					this.typeTitle = e;
				} else {
					this.typeTitle = '全部专业';
					this.typeValue = '';
				}
				this.teamXqbg();
			},
			goDetail() {

			},
			open(){
				this.zIndex = 100000000
				console.log('开');
			},
			close(){
				this.zIndex =0
				console.log('关');
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.fixed {
		// position: fixed;
		// top: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
	}

	.chart {
		width: 100%;
		height: 672rpx;
		background-color: #fff;
	}

	.c-list {
		background-color: #fff;
		margin-bottom: 40rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}

	.top {
		// margin-top: 100rpx;
		padding: 0rpx 40rpx;
		height: 98rpx;
		border-bottom: 2rpx solid #F0F1F8;
		background-color: #fff;
	}

	.icon {
		width: 7rpx;
		height: 28rpx;
		background: #626BF1;
		border-radius: 4rpx;
	}

	.list {
		padding: 0 47rpx 0 26rpx;
		margin: 34rpx 14rpx;
		width: 722rpx;
		height: 126rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.lists {
		padding: 20rpx 73rpx;
		width: 100%;
		height: 134rpx;
		border-bottom: 2rpx solid #F0F1F8;
	}

	.check {
		width: 100rpx;
		text-align: center;
	}

	.sort {
		width: 60rpx;
		text-align: center;
	}

	.name {
		padding-left: 40rpx;
		text-align: left;
		width: 350rpx;
	}

	.score {
		text-align: right;
		width: 120rpx;
	}
</style>
